<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";
import CollapsePanel from "@/components/CollapsePanel/index.vue";
import CollapseItem from "@/components/CollapsePanel/CollapseItem.vue";
import vueMkHeader from "@/assets/img/products/detail/size-bg.png";
import iconAdd from "@/assets/img/products/detail/add.png";
import iconDel from "@/assets/img/products/detail/del.png";
import tireBg from "@/assets/img/products/detail/guess-tire-bg.png";
import tireImg from "@/assets/img/home/tires/defaultTire.png";

import { listPage } from "@/api/tires";

const router = useRouter();
let selectedId = ref(6);
function clickEvent(id) {
    selectedId.value = id;
}
//script
const activeName = ref([5]);
const accordion = ref(true);
// 点击触发
const change = (value) => {
    console.log(value);
};
const props = defineProps({
    name: {
        type: String,
    },
    images: {
        type: String,
    },
    tiresType: {
        type: String,
    },
});
let activeKey = ref(0);
let imagesArr = ref([]);
let paramsArr = ref([]);
let isCollapse = ref(true);
watch(
    () => props.images,
    (newRouterName) => {
        if (newRouterName) {
            const tiresData = JSON.parse(newRouterName);
            imagesArr.value = tiresData.dataPictures;
            paramsArr.value = tiresData.dataParams;
            activeKey.value = imagesArr.value.length - 1;
        }
    },
    { immediate: true }
);
let list = ref([]);
watch(
    () => props.tiresType,
    (val) => {
        console.log("val", val);
        const tag = name.split(" ")[0];
        if (val) {
            listPage({ pageNum: 1, pageSize: 999, tiresType: val }).then((res) => {
                console.log(res);
                list.value = [];
                let arr1 = [],
                    arr2 = [];
                res.data.records.forEach((item) => {
                    if (item.productName.indexOf(tag) > -1) {
                        arr1.push({
                            name: item.productName,
                            id: item.id,
                            image: item.productPic ? item.productPic.split(",")[0] : "",
                            type: item.tiresType,
                        });
                    } else {
                        arr2.push({
                            name: item.productName,
                            id: item.id,
                            image: item.productPic ? item.productPic.split(",")[0] : "",
                            type: item.tiresType,
                        });
                    }
                });
                list.value = arr1.slice(0, 4);
                if (list.value.length < 4) {
                    list.value = list.value.concat(arr2.slice(0, 4 - list.value.length));
                }
            });
        }
    },
    { immediate: true }
);

const setActiveKey = (key) => {
    console.log("key", key);
    if (activeKey.value == key && isCollapse.value) {
        isCollapse.value = false;
    } else {
        isCollapse.value = true;
        activeKey.value = key;
    }
};
</script>
<template>
    <div :style="`background: url(${vueMkHeader});no-repeat bottom / contain`" loading="lazy">
        <div class="container py-7 text-center">
            <h1 class="text-black text-f-ERASBD text-title-size">SIZE & SPECS</h1>
            <!-- <CollapsePanel v-model="activeName" @change="change" :accordion="accordion">
                <collapse-item v-for="(item, index) in imagesArr" :key="index" :name="index">
                    <template #title>
                        <span class="text-white text-f-ERASBD" style="font-size: 1.9rem">{{ paramsArr[index] + "″" }}</span>
                    </template>
                    <template #content>
                        <img class="img-fluid" :src="item" alt="" />
                    </template>
                </collapse-item>
            </CollapsePanel> -->

            <div v-if="imagesArr.length > 1">
                <div v-for="(item, index) in imagesArr" :key="index">
                    <div :class="activeKey == index && isCollapse ? 'box-selected' : ''">
                        <div class="collapse-head mt-4" :class="activeKey == index && isCollapse ? 'bg-red' : 'bg-black'" style="cursor: pointer" @click="setActiveKey(index)">
                            <span class="text-white text-f-ERASBD" style="font-size: 1.9rem">{{ paramsArr[index] + "″" }}</span>
                            <img :src="activeKey == index && isCollapse ? iconDel : iconAdd" alt="" width="30" height="30" />
                        </div>
                    </div>

                    <div v-if="activeKey == index && isCollapse" class="collapse-content px-3 py-3">
                        <img class="img-fluid" :src="item" alt="" />
                    </div>
                </div>
            </div>
            <div v-else>
                <img class="img-fluid" :src="imagesArr[0] || ''" alt="" />
            </div>

            <div class="guess mt-6">
                <div class="guess-box bg-red">
                    <h1 class="text-f-ERASBD text-white">You Might Like</h1>
                </div>
            </div>
            <div style="padding: 0 0.71rem">
                <div class="row pt-4 px-3 justify-content-around" style="background: #fff; border-radius: 0 0 1rem 1rem">
                    <div class="col-lg-3 mb-4" v-for="(item, index) in list" :key="index">
                        <div class="show-pointer" @click="router.push(`/detail?id=${item.id}`)" style="position: relative; background: #f4f4f4; width: 100%; height: 8rem; border-radius: 0.5rem; overflow: hidden">
                            <img style="width: 80%; margin-top: 10%; margin-left: 38%" :src="item.image || tireImg" alt="" />

                            <h5 class="text-black" style="width: 40%; position: absolute; top: 35%; left: 8%; transform: ; text-align: left">
                                <span v-if="item.name && item.name.indexOf('  ') > -1">
                                    <span> {{ item.name.split("")[0] }}</span> <br /><span> {{ item.name.split("")[1] }}</span></span
                                >
                                <span v-else>{{ item.name }}</span>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.box-item {
    width: 100%;
    height: 6rem;
    background: #000;
    border-radius: 3rem;
}
.bg-red {
    background: #ed1c24;
}
.bg-black {
    background: #000;
}
.params {
    width: 100%;
    background: #fff;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;
    /* opacity: 0;
    transform: translateY(-100%);
    animation: slide-down 0.5s forwards; */
}
/* @keyframes params {
    to {
        opacity: 1;
        transform: translateY(0%);
    }
} */
/* @media (max-width: 992px) {
    .params {
        overflow-x: scroll;
    }
} */
.guess {
    background: linear-gradient(to top, white 0%, white 50%, #f3f3f300 50.01%, #f3f3f300 100%);
}
.guess .guess-box {
    width: 100%;
    height: 6rem;
    border-radius: 3rem;
}
.guess-box {
    padding-top: 1rem;
}

.collapse-head {
    display: flex;
    /* flex-flow: row nowrap; */
    align-items: center;
    justify-content: space-between;
    height: 4.4rem;

    padding: 0 4rem;
    border-bottom: none;
    border-radius: 2.2rem;
    overflow: hidden;
    z-index: 1;
}
.collapse-title {
    /* font-size: 14px; */
    color: #fff;
}
.collapse-content {
    background: #fff;
    border-radius: 0 0 1rem 1rem;
}
.box-selected {
    background: linear-gradient(to top, white 0%, white 50%, #f3f3f300 50.01%, #f3f3f300 100%);
}
@media (max-width: 991.98px) {
    .collapse-head {
        height: 3rem;
        padding: 0 1rem;
        border-radius: 1.5rem;
    }
    .guess .guess-box {
        width: 100%;
        height: 3rem;
        border-radius: 1.5rem;
        padding-top: 0.1rem !important;
    }
    .guess-box {
        padding-top: 0rem;
    }
}
</style>
